import { useContext } from 'react'
import context from '../../context'
import './index.css'

/* 
列表项组件
根据接收的todo显示列表项界面
 */
export default function Item({todo}) {
  
  // 取出通过context传递过的2个函数
  const {deleteTodo, toggleTodo} = useContext(context)

  return (
    <li>
      <label>
        <input type="checkbox" checked={todo.complete} onChange={() => toggleTodo(todo)}/>
        <span>{todo.title}</span>
      </label>
      <button className="btn btn-danger" onClick={() => deleteTodo(todo.id)}>删除</button>
    </li>
  )
}